<template>
  <div class="z-search flex">
    <div class="z-search-prefix">
      <svg
        t="1694827077911"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2994"
        width="15"
        height="15"
      >
        <path
          d="M953.474215 908.234504l-152.576516-163.241391c61.92508-74.48211 95.81186-167.36973 95.81186-265.073744 0-229.294809-186.63531-415.930119-416.102133-415.930119-229.294809 0-415.930119 186.63531-415.930119 415.930119s186.63531 415.930119 415.930119 415.930119c60.032925 0 118.00168-12.55703 172.186125-37.327062 16.169326-7.396607 23.221905-26.318159 15.825298-42.315471-7.396607-16.169326-26.318159-23.221905-42.315471-15.825298-45.927768 20.813707-94.951789 31.478582-145.695952 31.478582-194.031917 0-351.94087-157.908953-351.94087-351.94087 0-194.031917 157.908953-351.94087 351.94087-351.94087 194.031917 0 351.94087 157.908953 351.94087 351.94087 0 91.339493-34.918864 177.86259-98.048043 243.743995-12.213002 12.729044-11.868974 33.026709 0.860071 45.239711 1.032085 0.860071 2.236183 1.204099 3.268268 2.064169 0.860071 1.204099 1.376113 2.752226 2.408198 3.956325l165.477574 177.00252c6.192508 6.70855 14.793214 10.148833 23.393919 10.148833 7.912649 0 15.653284-2.92424 21.845792-8.600706C964.827146 941.433227 965.515202 921.135562 953.474215 908.234504z"
          fill="#ffffff"
          p-id="2995"
        ></path>
      </svg>
    </div>
    <input type="search" class="z-search-input" />
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.z-search {
  width: 300px;
  max-width: 800px;
  background: var(--theme-l);
  box-shadow: 0px 2px 48px rgba(0, 0, 0, 0.08);
  padding: 6px 12px;
  border-radius: 6px;
  overflow: hidden;
  transition: 0.3s ease-in;
  &:focus-within {
    width: 100%;
  }
}
.z-search-input {
  background-color: transparent;
  border: unset; // 继承父类的值或设置为初始值
  outline: none;
  display: inline-block;
  margin-left: 12px;
  width: calc(100% - 24px);
  color: #ffffff;
}
</style>
